<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view style="min-height: 100vh" class="bg-gray">
    <!--我的徒弟/师傅-->
    <u-navbar
      :title="title"
      leftIcon="arrow-left"
      leftIconSize="40"
      leftIconColor="#000000"
      @rightClick="moreShow"
      :placeholder="true"
      :autoBack="true"
      bgColor="#f2f2f2"
    >
      <view slot="right"
        ><u-icon name="more-dot-fill" size="36" color="#000000"></u-icon
      ></view>
    </u-navbar>
    <u-loading-page
      :loading="isLoading"
      loading-mode="spinner"
      icon-size="56rpx"
      loading-text="拼命加载中..."
      fontSize="28rpx"
      class="z-50 top-10"
    ></u-loading-page>
    <view class="mx-4">
      <view class="flex w-full bg-primary h-24 rounded-2xl mt-2">
        <view class="w-1/3 text-center text-white">
          <view class="text-2xl mt-3 leading-10">{{
            childData.totalChildCount
          }}</view>
          <view class="text-base">总数</view>
        </view>
        <view class="w-1/3 text-center text-white">
          <view class="text-2xl mt-3 leading-10">{{
            childData.activeChildCount
          }}</view>
          <view class="text-base">已激活</view>
        </view>
        <view class="w-1/3 text-center text-white">
          <view class="text-2xl mt-3 leading-10">{{
            childData.unactiveChildCount
          }}</view>
          <view class="text-base">未激活</view>
        </view>
      </view>
      <view class="flex mt-3">
        <view
          class="flex w-1/2 bg-primary h-24 rounded-2xl mr-3"
          @click="goTo('invite-poster')"
          ><view class="self-center text-center w-full text-base text-white"
            >邀请海报</view
          ></view
        >
        <view
          class="flex w-1/2 bg-primary rounded-2xl"
          @click="goTo('invite-link')"
          ><view class="self-center text-center w-full text-base text-white"
            >邀请链接</view
          ></view
        >
      </view>
      <view class="bg-white h-10 rounded-lg mt-5">
        <u-row>
          <u-col span="3.5"
            ><view class="text-center text-sm text-dark leading-10 font-bold">{{
              type == 'mer' ? '徒弟' : '师傅'
            }}</view></u-col
          >
          <u-col span="5.5"
            ><view class="text-center text-sm text-dark leading-10 font-bold"
              >注册时间</view
            ></u-col
          >
          <u-col span="3" class="relative"
            ><view class="text-center text-sm text-dark leading-10 font-bold"
              >状态</view
            >
            <view class="absolute right-2.5 top-3" @click="isTip = true"
              ><u-icon
                name="question-circle"
                color="#CCCCCC"
                size="32rpx"
              ></u-icon></view
          ></u-col>
        </u-row>
      </view>
    </view>

    <view class="mx-4 bg-white rounded-lg mt-2">
      <view v-if="infiniteList.length > 0">
        <view
          class="border-b-grayLights py-2.5"
          v-for="(item, index) in infiniteList"
          :key="item.userId"
        >
          <u-row class="flex items-center">
            <u-col span="3.5">
              <view class="text-center text-xs leading-5 font-medium">{{
                item.phone
              }}</view>
            </u-col>
            <u-col span="5.5">
              <view class="text-center text-xs leading-5 font-medium">{{
                item.createTime.substring(0, 10)
              }}</view>
            </u-col>
            <u-col span="3">
              <view class="text-xs flex justify-center items-center font-medium"
                ><view
                  class="bg-red-500 w-1 h-1 rounded-full mr-1"
                  v-if="item.isActive == 0"
                ></view
                >{{ item.isActive == 0 ? '未激活' : '已激活' }}</view
              >
            </u-col>
          </u-row>
        </view>
      </view>
      <b-empty v-else></b-empty>
    </view>
    <!--筛选-->
    <view
      class="fixed left-0 z-10 w-full bg-white rounded-b-3xl"
      :style="{ top: 84 + statusBarHeight * 2 + 'rpx' }"
      v-if="isShow"
    >
      <view class="mx-4 mt-2.5">
        <u-search
          placeholder=""
          v-model="keyword"
          height="60rpx"
          searchIconSize="40"
          @search="searchSubmit"
          :showAction="false"
        ></u-search>
      </view>
      <!-- <view class="mx-4">
        <u-tabs
          lineWidth="12"
          lineHeight="12"
          lineColor="#ff3d62"
          :activeStyle="{ color: '#333333' }"
          :inactiveStyle="{ color: '#999999' }"
          itemStyle="padding-left: 28rpx; padding-right:40rpx; height:88rpx;"
          :list="tabList"
          @click="typeTab"
        ></u-tabs>
        <view class="border-b-gray w-full mt-2"></view>
      </view> -->
      <!--筛选商家-->
      <view v-if="tabCur == 1">
        <view class="mx-4">
          <!--封装组件 => 支持单选/多选-->
          <view class="text-base text-dark leading-8 py-2">分类</view>
          <option-item
            :data="typeList"
            :val="selectedArray1"
            type="single"
            @update="typeSelect"
          ></option-item>
          <view class="text-base text-dark leading-8 pb-2">时间</view>
          <view class="flex">
            <view
              class="w-2/5 rounded-md h-7 leading-7 border-common text-center"
              @click="dateStart = true"
              >{{ validStart }}</view
            >
            <view class="w-1/5 text-center">——</view>
            <view
              class="w-2/5 rounded-md h-7 leading-7 border-common text-center"
              @click="dateEnd = true"
              >{{ validEnd }}</view
            >
          </view>
          <!--时间选择器暂定-->
          <u-datetime-picker
            @cancel="dateStart = false"
            @confirm="onStart"
            :show="dateStart"
            v-model="dateValidStart"
            mode="date"
            itemHeight="84"
            confirmColor="#ff3d62"
          ></u-datetime-picker>
          <u-datetime-picker
            @cancel="dateEnd = false"
            @confirm="onEnd"
            :show="dateEnd"
            v-model="dateValidEnd"
            mode="date"
            itemHeight="84"
            confirmColor="#ff3d62"
          ></u-datetime-picker>
        </view>
        <view class="flex justify-between mx-4 pb-7 mt-7">
          <view
            class="text-center text-base rounded-full w-1/2 h-10 leading-10 border-common mr-4"
            @click="reset"
            >清空</view
          >
          <view
            class="text-center text-base text-white rounded-full w-1/2 h-10 leading-10 login-btn ml-4"
            @click="filterSubmit"
            >完成</view
          >
        </view>
      </view>
      <!--邀请用户-->
      <view class="mx-4 pb-9 mt-4" v-show="tabCur == 2">
        <view class="flex">
          <view
            class="flex w-1/2 bg-primary h-24 rounded-2xl bg-box-shadow mr-3"
            @click="goTo('invite-poster')"
            ><view class="self-center text-center w-full text-base text-white"
              >邀请海报</view
            ></view
          >
          <view
            class="flex w-1/2 bg-primary rounded-2xl bg-box-shadow"
            @click="goTo('invite-link')"
            ><view class="self-center text-center w-full text-base text-white"
              >邀请链接</view
            ></view
          >
        </view>
      </view>
    </view>
    <view
      class="bg-black opacity-40 w-full h-full fixed left-0 top-0"
      v-if="isShow"
      @click="isShow = false"
    ></view>

    <!--激活说明-->
    <u-modal
      :show="isTip"
      title="温馨提示"
      confirmColor="#FF3D62"
      confirmText="我知道了"
      :title-style="{
        'font-size': '34rpx',
        'font-weight': 'bold',
        'line-height': '48rpx',
        color: '#000',
      }"
      @confirm="isTip = false"
    >
      <view class="py-1 text-sm leading-6"
        >底下徒弟有提交过1次订单编号，也就是有提交过一次活动，就算是激活了。</view
      >
    </u-modal>
  </view>
</template>

<script>
import { phoneFormat } from '@/filters/textformat';
import infinite from '@/mixins/infinite';
import { getSubsList, getChildData } from '../../services/account';
import { getInviteStatus } from '../../../services/user';

export default {
  mixins: [infinite],
  filters: {
    phoneFormat,
  },
  data() {
    return {
      statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
      isLoading: true,
      title: '我的徒弟',
      type: 'mer',
      isShow: false,
      dateValidStart: Number(new Date()),
      dateValidEnd: Number(new Date()),
      validStart: '',
      validEnd: '',
      selectedArray1: [],
      selectedArray2: [],
      typeValue: '',
      typeList: [
        { text: '已激活', value: '1' },
        { text: '未激活', value: '0' },
      ],
      incomeValue: '',
      dateStart: false,
      dateEnd: false,
      keyword: '',
      childData: {
        activeChildCount: 0,
        totalChildCount: 0,
        unactiveChildCount: 0,
      },
      seller: {
        subList: [],
      },
      infiniteList: [],
      tabCur: 1,
      tabList: [
        { name: '筛选徒弟', type: 1 },
        { name: '邀请徒弟', type: 2 },
      ],
      //是否开启邀请
      isOpenInvite: '1',
      isTip: false,
    };
  },
  async created() {
    this._getChildData();
  },
  async onShow() {
    const { type } = this.$Route.query;
    this.type = type;
    if (type == 'ser') {
      this.title = '我的师傅';
      this.tabList[0].name = '筛选师傅';
      this.tabList[1].name = '邀请师傅';
    }
    this.getInfiniteList(true);
  },
  methods: {
    //我的徒弟-徒弟数据
    async _getChildData() {
      const { code, data } = await getChildData();
      if (code != 200) return;
      this.childData = data;
    },
    //获取是否开启邀请
    async invitTo() {
      const { code, data } = await getInviteStatus();
      if (code != 200) return;
      if (data.isOpenInvite == '1') {
        this.$Router.push({
          name: 'invite-link',
        });
      } else if (data.isOpenInvite == '0') {
        uni.showToast({
          title: '您没有邀请好友权限哟~',
          icon: 'none',
        });
        return;
      }
    },
    //显示弹窗
    moreShow() {
      this.isShow = !this.isShow;
      this.tabCur = 1;
      if (this.typeValue != '') {
        this.selectedArray1 = [this.typeValue];
      } else {
        this.selectedArray1 = [];
      }
      if (this.incomeValue != '') {
        this.selectedArray2 = [this.incomeValue];
      } else {
        this.selectedArray2 = [];
      }
    },
    //手动添加
    handAdd() {
      this.isShow = false;
      this.$Router.push({
        name: 'seller-add',
        params: {
          type: this.type,
        },
      });
    },
    //徒弟列表数据
    async getInfiniteData(
      pageIndex,
      pageSize,
      diyName = 'subList',
      diyType = 1
    ) {
      if (this.typeValue == undefined) {
        this.typeValue = '';
      }
      let params = {
        begTime: this.validStart,
        endTime: this.validEnd,
        isActive: this.typeValue,
        searchKey: '',
        pageNum: pageIndex,
        pageSize: pageSize,
      };
      //console.log(params);
      const { code, data } = await getSubsList(params);
      if (code != 200) return;
      this.seller = data;
      this.isLoading = false;
      return data.records;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //显示提示
    showTip(item) {
      item.isShow = !item.isShow;
    },
    //分类选择
    typeSelect(valueArr, textArr) {
      this.typeValue = valueArr[0];
    },
    //日期选择
    onStart(e) {
      const timeFormat = uni.$u.timeFormat;
      if (typeof e.value == 'string') {
        this.validStart = e.value;
      } else {
        this.validStart = timeFormat(e.value, 'yyyy-mm-dd');
      }
      this.dateStart = false;
    },
    onEnd(e) {
      const timeFormat = uni.$u.timeFormat;
      if (typeof e.value == 'string') {
        this.validEnd = e.value;
      } else {
        this.validEnd = timeFormat(e.value, 'yyyy-mm-dd');
      }
      this.dateEnd = false;
    },
    //清空筛选
    reset() {
      this.selectedArray1 = [];
      this.selectedArray2 = [];
      this.typeValue = '';
      this.incomeValue = '';
      this.validStart = '';
      this.validEnd = '';
      //执行列表方法
      this.getInfiniteList(true);
    },
    //筛选方法
    filterSubmit() {
      //执行列表方法
      this.isShow = false;
      this.getInfiniteList(true);
    },
    //搜索方法
    async searchSubmit() {
      try {
        if (this.keyword == '') {
          uni.showToast({
            title: '请输入搜索关键字',
            icon: 'none',
          });
          return;
        }
        this.isShow = false;
        this.getInfiniteList(true);
      } catch (error) {
        console.error(error);
      }
    },
    //Tab切换
    typeTab(item) {
      this.tabCur = item.type;
    },
    //商家详情
    sellerDetail(item) {
      this.$Router.push({
        name: 'seller-detail',
        params: {
          id: item.userId,
          type: this.type,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
page {
  background: #f2f2f2;
}
/deep/ .uni-textarea-textarea {
  font-size: 24rpx;
}
</style>
